<template>
  <div class="MeiTuanGoods">
    <dv-border-box-2   v-if="cards.length > 0" :color="dataVThem.color" :backgroundColor="dataVThem.bgColor">
      <el-row type="flex" justify="start" class="cards">
        <el-col :offset="1" class="card" :span="24 / 9" v-for="(card, index) in cards" :key="index">
          <div @click="pageUrl(card)" style="padding: 0%;">
            <div class="imgContainer">
              <img :src="card.nav_img" object-fit="cover" class="image"></div>
            <div class="txt common hiddenOverflow">
              {{ card.nav_name }}
            </div>
          </div>
        </el-col>
      </el-row>
    </dv-border-box-2>
    <!-- <br /> -->
    <div v-if="img">
      <img :src="img" object-fit="cover" class="image kuanTu">
    </div>
    <el-drawer :visible.sync="drawerThis" size="100%">
      <img :src="[actImg]" alt="" srcset="">
    </el-drawer>
  </div>

</template>
<script>
import {actClick} from "../../../api/http";

// const mockData = []
export default {
  props: {
    // img: {
    //   type: String,
    //   default: 'https://img0.baidu.com/it/u=351129897,3871390044&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1690736400&t=cf7580fca7fc240c01ae7daf5a2e295e'
    // },
    cards: []
  },
  data() {
    return {
      total: null,
      actImg:'',
      drawerThis:false
    }
  },
  computed: {
    img() {
      let temp = this.total
      if (temp && (temp = temp.mch_info) && (temp.mch_act_img))
        return temp.mch_act_img
      return null
    }
  },
  created() {

    let totalJson = sessionStorage.getItem('total')
    if (totalJson) {
      try {
        this.total = JSON.parse(totalJson)
      } catch (e) {

      }
    }
    this.$EventBus.$on('total', this.setTotal)
  },
  beforeDestroy() {
    this.$EventBus.$off('total', this.setTotal)
  },
  methods: {
    setTotal(total) {
      this.total = total
    },
    pageUrl(card) {
      this.actImg = ""
      // 跳转 1，自身页面，2 图片/网址 3 其他小程序 4 弹出文字 5 插件
      if (card["act_type"] === 1) {
        if (card['mini_code'] === '') {
          alert("获取自身小程序跳转码失败");
          return false;
        }
        this.actImg = card['mini_code'];
        this.drawerThis = !this.drawerThis
      } else if (card["act_type"] === 2) {
        if (card['h5'] === '') {
          if (card['long_h5'] === '') {
            alert("没有配置链接地址");
            return false;
          }
          window.open(card['long_h5'], '_blank');
        } else {
          window.open(card['h5'], '_blank');
        }
      } else if (card['act_type'] === 3) {
        if (card['mini_code'] === '') {
          alert("获取第三方小程序跳转码失败");
          return false;
        }
        this.actImg = card['mini_code'];
        this.drawerThis = !this.drawerThis
      } else if (card['act_type'] === 5) {
        if (card['mini_code'] === '') {
          alert("没有正确配置插件信息");
          return false;
        }
        this.actImg = card['mini_code'];
        this.drawerThis = !this.drawerThis
      }
      actClick(card['nav_id'])
    }
  }
}
</script>
<style scoped lang="less">
@import url('~@/assets/style/var.less');
@import url('~@/assets/style/common.less');


.MeiTuanGoods {
  margin-top: 2rem;

  .cards {
    width: @main-width;
    flex-wrap: wrap;
    padding: 1rem;
    padding-bottom: 0;

    .card {
      margin-left: 40px;
      @imgH: 130px;
      @imgW: 11%;
      // margin-right: 2rem;
      margin-bottom: 1rem;
      border-radius: 10px;
      color: @txt-color;
      border: 1px solid @border-color;
      min-height: calc(~"@{imgH} + 2rem");
      height: calc(~"@{imgH} + 2rem");
      width: @imgW;

      .txt {
        width: 100%;
        padding: 0rem 1rem;
        box-sizing: border-box;
        text-align: center;
      }

      .imgContainer,
      .image {
        width: 100%;
        height: @imgH;
      }

      &:hover {
        cursor: pointer;
      }
    }
  }

  .kuanTu {
    margin-top: 1rem;
    width: @main-width;
    min-height: 3rem;
    max-height: 10vh;
  }
}</style>
